<!--荣誉橱窗-->
<template>
  <section @click.stop="back" ref="dialogWrap" v-if="isShow" id="videoPlayerWrap" class="dialog-wrap">
    <div @click.stop="back" class="close"><i></i><i></i></div>

    <section class="img-wrap">
      <div class="img-view">
        <img :src="imgSrc" alt="">
      </div>
      <div class="content" v-html="content">
      </div>
      <p class="pdv-10"></p>
    </section>

  </section>
</template>

<script>
  export default {
    name: 'imgViewComponent',
    props: ['imgSrc', 'content'],
    data () {
      return {
        isShow: !true
      }
    },
    created () {
    },
    mounted () {
      window.goBackMethod = () => {
        this.goBackMethod()
      }
    },
    beforeDestroy () {
      this.tools.dialogDestroy()
    },
    methods: {
      show () {
        this.tools.dialog(1, this)
        this.isShow = true
      },
      back () {
        this.tools.dialog(-1)
        this.isShow = false
      },
      goBackMethod () {
        if (this.isShow) {
          this.isShow = false
          return 'notShow'
        } else {
          return ''
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .dialog-wrap {
    position:fixed;
    z-index: 20;
    width:100vw;
    height:100vh;
    let:0;top:0;
    padding-top:10px;
    /*background:rgba(#000, .8);*/
    /*background:rgba(195,73,7, 1);*/
    background:#913635;
  }
  .close {
    position: absolute;
    top:20px;
    right:20px;
    z-index:89;
    width:pxToRem(30px);
    height:pxToRem(30px);
    transform:rotate(45deg);
    i {
      background:#999;
      position: absolute;
    }
    i:first-child {
      top:50%;
      left:0;
      margin-top:-1px;
      width:pxToRem(30px);
      height:2px;
    }
    i:last-child {
      top:0;
      left:50%;
      margin-left:-1px;
      height:pxToRem(30px);
      width:2px;
    }
  }
  .img-wrap {
    /*position: absolute;
    z-index: 1;
    top:50%;
    left:0;
    right:0;
    transform:translateY(-65%);
    padding-top:20px;
    height: 60%;*/
    z-index: 1;
    height: 100%;
    overflow: scroll;
    .img-view {
      margin-top: 1.3rem;
      width:100%;
      text-align: center;
      img {
        max-width:100%;
        width:99%;
      }
    }
    .content {
      color:#fff;
      padding:10px;
      font-size:16PX;
      text-indent: 2em;
      white-space: normal;
      word-break: break-all;
      margin-top: 5%;
      margin-left: 1%;
      width:100%;
      height:66%;
      overflow-y:auto;
      overflow-x:auto;
    }
  }
</style>
